<template>
  <div class="dashboard">
    <el-container>
      <el-header>
        <div class="header-content">
          <h1>当当网商品数据分析系统</h1>
          <div class="header-actions">
            <el-button type="primary" @click="refreshData">
              <el-icon><Refresh /></el-icon>
              刷新数据
            </el-button>
          </div>
        </div>
      </el-header>
      
      <el-main>
        <!-- 数据概览卡片 -->
        <el-row :gutter="20" class="overview-cards">
          <el-col :span="6">
            <el-card class="overview-card">
              <div class="card-content">
                <div class="card-icon">
                  <el-icon size="40" color="#409EFF"><Goods /></el-icon>
                </div>
                <div class="card-info">
                  <div class="card-title">总商品数</div>
                  <div class="card-value">{{ overview.totalProducts }}</div>
                </div>
              </div>
            </el-card>
          </el-col>
          
          <el-col :span="6">
            <el-card class="overview-card">
              <div class="card-content">
                <div class="card-icon">
                  <el-icon size="40" color="#67C23A"><Category /></el-icon>
                </div>
                <div class="card-info">
                  <div class="card-title">分类数量</div>
                  <div class="card-value">{{ overview.totalCategories }}</div>
                </div>
              </div>
            </el-card>
          </el-col>
          
          <el-col :span="6">
            <el-card class="overview-card">
              <div class="card-content">
                <div class="card-icon">
                  <el-icon size="40" color="#E6A23C"><TrendCharts /></el-icon>
                </div>
                <div class="card-info">
                  <div class="card-title">平均价格</div>
                  <div class="card-value">¥{{ overview.avgPrice }}</div>
                </div>
              </div>
            </el-card>
          </el-col>
          
          <el-col :span="6">
            <el-card class="overview-card">
              <div class="card-content">
                <div class="card-icon">
                  <el-icon size="40" color="#F56C6C"><Clock /></el-icon>
                </div>
                <div class="card-info">
                  <div class="card-title">更新时间</div>
                  <div class="card-value">{{ overview.lastUpdate }}</div>
                </div>
              </div>
            </el-card>
          </el-col>
        </el-row>

        <!-- 图表区域 -->
        <el-row :gutter="20" class="charts-section">
          <el-col :span="12">
            <el-card>
              <template #header>
                <span>价格区间分布</span>
              </template>
              <div class="chart-container">
                <v-chart :option="priceDistributionOption" style="height: 300px;" />
              </div>
            </el-card>
          </el-col>
          
          <el-col :span="12">
            <el-card>
              <template #header>
                <span>分类商品数量</span>
              </template>
              <div class="chart-container">
                <v-chart :option="categoryDistributionOption" style="height: 300px;" />
              </div>
            </el-card>
          </el-col>
        </el-row>


      </el-main>
    </el-container>
  </div>
</template>

<script>
import { ref, onMounted } from 'vue'
import { use } from 'echarts/core'
import { CanvasRenderer } from 'echarts/renderers'
import { PieChart, BarChart } from 'echarts/charts'
import { GridComponent, TooltipComponent, LegendComponent } from 'echarts/components'
import VChart from 'vue-echarts'
import axios from 'axios'

use([CanvasRenderer, PieChart, BarChart, GridComponent, TooltipComponent, LegendComponent])

export default {
  name: 'Dashboard',
  components: {
    VChart
  },
  setup() {
    const overview = ref({
      totalProducts: 0,
      totalCategories: 0,
      avgPrice: 0,
      lastUpdate: '-'
    })



    const priceDistributionOption = ref({
      title: {
        text: '价格区间分布',
        left: 'center'
      },
      tooltip: {
        trigger: 'item',
        formatter: '{a} <br/>{b}: {c} ({d}%)'
      },
      legend: {
        orient: 'vertical',
        left: 'left'
      },
      series: [
        {
          name: '价格区间',
          type: 'pie',
          radius: '50%',
          data: [
            { value: 0, name: '0-50元' },
            { value: 0, name: '50-100元' },
            { value: 0, name: '100元以上' }
          ]
        }
      ]
    })

    const categoryDistributionOption = ref({
      title: {
        text: '分类商品数量',
        left: 'center'
      },
      tooltip: {
        trigger: 'axis',
        axisPointer: {
          type: 'shadow'
        }
      },
      xAxis: {
        type: 'category',
        data: []
      },
      yAxis: {
        type: 'value'
      },
      series: [
        {
          name: '商品数量',
          type: 'bar',
          data: []
        }
      ]
    })

    const fetchOverviewData = async () => {
      try {
        const response = await axios.get('/api/dashboard/overview')
        overview.value = response.data
      } catch (error) {
        console.error('获取概览数据失败:', error)
      }
    }

    const fetchPriceDistribution = async () => {
      try {
        const response = await axios.get('/api/dashboard/price-distribution')
        priceDistributionOption.value.series[0].data = response.data
      } catch (error) {
        console.error('获取价格分布数据失败:', error)
      }
    }

    const fetchCategoryDistribution = async () => {
      try {
        const response = await axios.get('/api/dashboard/category-distribution')
        categoryDistributionOption.value.xAxis.data = response.data.categories
        categoryDistributionOption.value.series[0].data = response.data.counts
      } catch (error) {
        console.error('获取分类分布数据失败:', error)
      }
    }



    const refreshData = () => {
      fetchOverviewData()
      fetchPriceDistribution()
      fetchCategoryDistribution()
    }



    onMounted(() => {
      refreshData()
    })

    return {
      overview,
      priceDistributionOption,
      categoryDistributionOption,
      refreshData
    }
  }
}
</script>

<style scoped>
.dashboard {
  height: 100vh;
}

.el-header {
  background-color: #fff;
  border-bottom: 1px solid #e4e7ed;
  padding: 0 20px;
}

.header-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 100%;
}

.header-content h1 {
  margin: 0;
  color: #303133;
}

.el-main {
  padding: 20px;
  background-color: #f5f5f5;
}

.overview-cards {
  margin-bottom: 20px;
}

.overview-card {
  height: 120px;
}

.card-content {
  display: flex;
  align-items: center;
  height: 100%;
}

.card-icon {
  margin-right: 20px;
}

.card-info {
  flex: 1;
}

.card-title {
  font-size: 14px;
  color: #909399;
  margin-bottom: 8px;
}

.card-value {
  font-size: 24px;
  font-weight: bold;
  color: #303133;
}

.charts-section {
  margin-bottom: 20px;
}

.chart-container {
  width: 100%;
}


</style> 